<template>
  <section id="shopcart">
    <section class="header">
        <table class="tb_form">
      <tbody>
        <tr>
        <td>商品名称：</td>
        <td><input id="goods_name" v-model.trim="addGoods.name" required /></td>
      </tr>
      <tr>
        <td>商品价格：</td>
        <td><input id="goods_price" v-model.trim="addGoods.price" required  /></td>
      </tr>
      <tr>
        <td>商品数量：</td>
        <td><input id="goods_quantity" v-model.trim="addGoods.quantity" required /></td>
      </tr>
      <tr>
        <td colspan="2" align="center">
          <button @click="add()">添加商品</button>
        </td>
      </tr>
      </tbody>
      </table>
    </section>
    <hr />
    <section class="search">
      请输入关键字：<input id="keywords" v-model="keywords" /><button>搜索商品</button>
    </section>
    <hr />
    <section>
      <table class="goods-list" border="1" cellspacing="0">
        <thead>
          <tr>
            <th>商品编号</th>
            <th>商品名称
            </th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr  style="text-align: center;" v-for="(itim,index) in filerGoodsList">
            <td>{{ itim.id }}</td>
            <td>{{itim.name}}</td>
            <td>{{ itim.price }}</td>
            <td><button id="btn-add"  @click="changQuantity('+',index)">+</button>
              <input class="number"  style="width: 20px;" :value="itim.quantity" />
              <button id="btn-min" :disabled="itim.quantity==1" @click="changQuantity('-',index)">-</button>
            </td>
            <td>
              <button @click="removeItem(index)">移除</button>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5">购物车商品总价：¥{{total}}元</td>
          </tr>
        </tfoot>
      </table>
    </section>
  </section>
</template>



<script setup lang="ts">
import { computed, reactive, toRefs } from 'vue';

interface GoodsInfo{
  id:number;
  name:string;
  price:number;
  quantity:number;
}
//定义封装
interface Data{
  goodsList:Array<GoodsInfo>
    addGoods:GoodsInfo
}
let data:Data=reactive({
  goodsList:[
    {id:1,name:'小米手机',price:1999,quantity:1},
    {id:2,name:'iphone',price:16999,quantity:8},
    {id:3,name:'ipad',price:19999,quantity:5}
  ],
  addGoods:{},
  keywords:''
})
//解构对象
let {goodsList,addGoods,keywords} = {...toRefs(data)}

//删除商品
function removeItem(index:number){
  data.goodsList.splice(index,1)
}
//计算总价
let total =computed(()=>{
  return data.goodsList.reduce((total,itim)=>{
    return total+(itim.price*itim.quantity)
},0)
})
//增加商品
function add(){
  if(!addGoods.value.name){
    alert('商品名称不能为空')
    return
  }
  let id=data.goodsList.length+1
  addGoods.value.id=id
  data.goodsList.push(addGoods.value)
  data.addGoods={id:0,name:'',price:0,quantity:1}
}

//修改数量
function changQuantity(op:string,index:number){
  if(op==='+'){
    data.goodsList[index].quantity++
  }else{
    data.goodsList[index].quantity--
  }
}
let filerGoodsList = computed(()=>{
  if(!keywords.value.length){
    return data.goodsList.filter((itim)=>{
  return itim.name.toLowerCase().includes(keywords.value.toLowerCase())
})
  }else{
    return data.goodsList
  }
  }
)
</script>




<style>
  table{
    margin: 0 auto;
    line-height: 40px;
  }

  .search{
    text-align: center;
  }
</style>